<template>
    <div id="app">
        <!-- <div id='app2'></div> -->
        <!--路由输出-->
        <router-view/>
    </div>
</template>

<script>
    /* 创建 XMLHttpRequest 对象 */

    export default {
        name: 'app',
        data(){
            return{
                loginCount: 0
            }
        },
        created(){
        },
        mounted(){

        /**
         * 拉取app用户信息
         * @param
         */
            window.userpuller = this.userpuller
        },
        methods:{

            /**
             * 拉取app用户信息
             * @param
             */
            userpuller(account,pwd, token, type, uid){
              // this.loginCount++
              // console.log(this.loginCount)
              // window.localStorage.clear()
                if (token && uid) {
                     this.Posthttp('/?method=flower.login.index&loginCount=' + this.loginCount,{
                        token,
                        uid
                    }, (res) => {
                        console.log(res)
                        if(JSON.parse(res.bodyText).status ===1){
                            window.localStorage.setItem('userInfo',JSON.stringify(JSON.parse(res.bodyText).data.member))
                        }else{
                            this.$message.warning(JSON.parse(res.bodyText).msg)
                        }
                    }, (err) => {
                        console.log('XXXX----err:',err)
                    })
                } else if (token && type) {
                    this.Posthttp('/?method=flower.login.index',{
                        username:'',
                        password:'',
                        third_token: token,
                        third_type: type
                    },(res)=>{
                        if(JSON.parse(res.bodyText).status ===1){
                            window.localStorage.setItem('userInfo', JSON.stringify(JSON.parse(res.bodyText).data.member))//成功后储存用户
                        }else{
                            // this.$message.warning(JSON.parse(res.bodyText).msg)
                        }
                    });
                } else if( account && pwd ){
                    this.Posthttp('/?method=flower.login.index',{
                        username:account,
                        password:pwd,
                        third_token: '',
                        third_type: ''
                    },(res)=>{
                        if(JSON.parse(res.bodyText).status ===1){
                            window.localStorage.setItem('userInfo', JSON.stringify(JSON.parse(res.bodyText).data.member))//成功后储存用户
                        }else{
                            // this.$message.warning(JSON.parse(res.bodyText).msg)
                        }
                    }, (err) => {
                    });
                } else {
                    window.localStorage.removeItem('userInfo')
                }
            }
        }
    }
</script>

<style lang="scss">
    ::-webkit-scrollbar {
        display: none;
    }
    #app {
        font-size: .24rem;
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    }
    #app2{
        position: absolute;
        top: 0;
        left:0;
        z-index: 10000
    }
    /*    遮罩*/
    .mask{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.6);
        z-index: 999999;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .top-main{
        width: 100%;
        position: fixed;
        top: .8rem;
        bottom: 0;
    }
    .main{
        width: 100%;
        position: fixed;
        top: .8rem;
        bottom: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .main-noFoot{
        width: 100%;
        position: fixed;
        top: .8rem;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    /*    自定义动画-全局*/
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
    /**/
    .slide-fade-enter-active {
        transition: all .5s ease;
    }
    .slide-fade-leave-active {
        transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(40px);
        opacity: 0;
    }
    /**/
    .bounce-up-enter-active {
        transition: all .3s linear;
    }
    .bounce-up-leave-active {
        transition: all .3s linear;
    }
    .bounce-up-enter, .bounce-up-leave-to {
        transform: translateY(40px);
        opacity: 0;
    }
    /*气球 浮动*/
    @-webkit-keyframes balloon1{
        0%, 100% {
            -webkit-transform: translateY(0) rotate(-6deg);
            transform: translateY(0) rotate(-6deg);
        }
        50% {
            -webkit-transform: translateY(-20px) rotate(8deg);
            transform: translateY(-20px) rotate(8deg);
        }
    }
    @-webkit-keyframes balloon2{
        0%, 100% {
            -webkit-transform: translateX(0) rotate(6deg);
            transform: translateX(0) rotate(6deg);
        }
        50% {
            -webkit-transform: translateX(-30px) rotate(-8deg);
            transform: translateX(-30px) rotate(-8deg);
        }
    }
    /*分享弹窗*/
    .share-content-window{
        width: 5.2rem;
        background-color: #fff;
        padding: .3rem .14rem;
        position: absolute;
        left: calc(50% - 2.6rem);
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
        position: relative;
        text-align: center;
        // 分享两个字的样式
        .field-set{
            position: relative;
            color:#333;
            margin-top: .58rem;
            &::after{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                height: 1px;
                width: 1.9rem;
                background: #999;
            }
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                height: 1px;
                width: 1.9rem;
                background: #999;
            }
        }
        .close{
            width: .4rem;
            height: .4rem;
            position: absolute;
            right: 0;
            top: -1.1rem;
            &::after{
                content: '';
                display: block;
                width: 1px;
                height: .7rem;
                background-color: #fff;
                position: absolute;
                bottom: -.7rem;
                left: calc(50% - 0.5px);
            }
        }
        .type-wrap{
            &>h3{
                padding: 0 .5rem;
                font-size: .28rem;
                color: #e4731e;
                line-height: .5rem;
                text-align: center;
            }
            &>button{
                width: 1.93rem;
                height: .64rem;
                background: #e5761e;
                border: 0;
                outline: none;
                color: #fff;
                border-radius: .08rem;
                margin-top: .2rem;
            }
        }
        .share-wrapper{
            &>.noMore{
                margin-top: .58rem;
                border-top: 1px solid #999;
                .noMoreText{
                    color: #333;
                    padding: 0 .2rem;
                }
            }
            .share-list{
                margin-top: .38rem;
                display: flex;
                li{
                    flex: 1;
                    img{
                        width: .9rem;
                        height: .9rem;
                    }
                    p{
                        color: #333;
                        margin-top: .2rem;
                    }
                }
            }
        }
        .lesson-wrapper{
            padding: 0 .16rem;
            &>h3{
                font-size: .3rem;
                color: #333;
                margin-bottom: .5rem;
            }
            .info-box{
                &>img{
                    width: 2rem;
                    height: auto;
                    float: left;
                } 
                .lesson-name{
                    margin-left: 2rem;
                    text-align: left;
                    padding: 0 .2rem;
                    line-height: .34rem;
                    color: #333;
                }
            }
        }

    }
</style>
